import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Home from '../Home';
import Start from '../Start';
import WorkBench from '../WorkBench';
import DataStatistics from '../DataStatistics';

const Tab = createMaterialBottomTabNavigator();

const ButomTabs = () => (
    <Tab.Navigator
        initialRouteName="主页"
        screenOptions={({ route }) => ({
            tabBarIcon: ({ color }) => {
                let iconName;
                switch (route.name) {
                case '主页':
                    iconName = 'home';
                    break;
                case '开始':
                    iconName = 'bars';
                    break;
                case '工作台':
                    iconName = 'isv';
                    break;
                case '数据统计':
                    iconName = 'barchart';
                    break;
                default: break;
                }
                return (
                    <AntDesign
                        name={iconName}
                        size={20}
                        color={color}
                    />
                );
            },
        })}
    >
        <Tab.Screen name="主页" component={Home} initialParams={{ render: Math.random(0, 1) }} />
        <Tab.Screen name="开始" component={Start} />
        <Tab.Screen
            name="工作台"
            component={WorkBench}
            initialParams={{ render: Math.random(0, 1) }}
        />
        <Tab.Screen
            name="数据统计"
            component={DataStatistics}
            initialParams={{ render: Math.random(0, 1) }}
        />
    </Tab.Navigator>
);

export default ButomTabs;
